<template>
  <view class="sign-up">
    <view class="card">
      <text class="h1"> 活动报名 </text>
      <text class="h3"> 诚邀您的参加 </text>
    </view>

    <view class="title"> 活动报名 </view>

    <view class="sign-up-form">
      <uni-list-item
          v-if="enterpriseType === '1'"
          style="position: relative; left: -32rpx;"
          thumb-size="min"
          title="部门"
          @click="departmentClick"
          link
          :rightText="signUpModel.form.wechat === '' ? '请选择部门' : signUpModel.form.wechat"
      />

      <up-form
        labelPosition="left"
        :model="signUpModel"
        :rules="signUpModel.rules"
        ref="form1"
      >
        <up-form-item
          label="姓名"
          labelWidth="auto"
          prop="form.userName"
          ref="item1"
        >
          <up-input
            v-model="signUpModel.form.userName"
            placeholder-class="plaClass"
            placeholder="请输入姓名"
            border="none"
            input-align="right"
          />
        </up-form-item>
        <up-form-item
          label="联系电话"
          labelWidth="auto"
          prop="form.userPhone"
          ref="item1"
        >
          <up-input
              type="number"
            v-model="signUpModel.form.userPhone"
            placeholder-class="plaClass"
            placeholder="请输入联系电话"
            border="none"
            input-align="right"
          />
        </up-form-item>
        <up-form-item v-if="enterpriseType !== '1'" label="企业名称" labelWidth="auto" ref="item1">
          <up-input
            v-model="signUpModel.form.wechat"
            placeholder-class="plaClass"
            placeholder="请输入企业名称"
            border="none"
            input-align="right"
          />
        </up-form-item>

        <up-form-item v-if="enterpriseType !== '1'" label="企业地址" labelWidth="auto" ref="item1">
          <up-input
              v-model="signUpModel.form.enterpriseAddress"
              placeholder-class="plaClass"
              placeholder="请输入企业地址"
              border="none"
              input-align="right"
          />
        </up-form-item>

        <up-form-item label="参加时间" labelWidth="auto" ref="item1">
          <picker @change="bindPickerDateChange" :value="arrayDateIndex" :range="arrayDate">
            <view class="uni-input">{{arrayDate[arrayDateIndex]}} ▼</view>
          </picker>
        </up-form-item>

        <up-form-item label="领票数" labelWidth="auto" ref="item1">
          <picker @change="bindPickerChange" :value="arrayIndex" :range="array">
            <view class="uni-input">{{array[arrayIndex]}} ▼</view>
          </picker>
        </up-form-item>

        <up-form-item v-if="enterpriseType !== '1'"  label="领票地点" labelWidth="auto" ref="item1">
          <view class="uni-input">科学城智谷14栋1楼</view>
        </up-form-item>

        <up-form-item v-if="enterpriseType === '1'"  label="领票地点" labelWidth="auto" ref="item1">
          <picker @change="bindPickerAddressChange" :value="arrayAddressIndex" :range="arrayAddress" style="width: 320rpx; position: relative; right: 50rpx;">
            <view class="uni-input">{{arrayAddress[arrayAddressIndex]}} ▼</view>
          </picker>
        </up-form-item>

        <up-form-item label="领票时间" labelWidth="auto" ref="item1">
          <view class="uni-input">5月22日 12:00-14:00</view>
        </up-form-item>

        <up-form-item label="联系人" labelWidth="auto" ref="item1" v-if="enterpriseType !== '1'">
          <view class="uni-input">李女士 18586947830</view>
        </up-form-item>

        <up-form-item label="联系人" labelWidth="auto" ref="item1" v-if="enterpriseType === '1'">
          <view class="uni-input">朱女士 18886457582</view>
        </up-form-item>
      </up-form>
    </view>

<!--    <view style="font-size: 30rpx; text-align: center; color: #434343; padding-bottom: 200rpx;">{{arrayDate[arrayDateIndex]}} 剩余票数 : {{500 - ticketTotal[arrayDateIndex]}}</view>-->
    <view style="font-size: 30rpx; text-align: center; color: #434343; padding-top: 50rpx; padding-bottom: 200rpx; font-weight: bold;">{{arrayDate[arrayDateIndex]}} 票数300张，先报先得！</view>

    <view class="submit-btn">
      <view class="btn" @tap="handleSubmitSignUpForm"> 立即报名 </view>
    </view>
  </view>
  <custom-dialog
    v-if="popDialogShowFlag"
    title="报名成功"
    @close-btn-click="handleDialogCloseBtnClick"
  >
    <view class="text-content">
      <text class="text"> 恭喜你报名成功，请按时参加活动 </text>
    </view>
    <view class="btn-group">
      <text class="btn" @tap="handleDialogCloseBtnClick">我知道了</text>
    </view>
  </custom-dialog>

  <up-picker
      :show="departmentShow"
      @confirm="headelDepartmentSaveClick"
      @cancel="departmentShow = false"
      :columns="departmentList"
      keyName="name"
  ></up-picker>
</template>
<script setup>
import { ref, reactive } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { getUrlParamsInH5, getUrlParamsInWeixin } from "../../utils/utils";
import {getActivityDetailTicketTotalApi, userSubmitSignUpActivityFormApi} from "../../api/activity";
import CustomDialog from "@/components/CustomDialog";
import { customNav } from "../../utils/customNav";
import UniListItem from "@/uni_modules/uni-list/components/uni-list-item/uni-list-item.vue";

const popDialogShowFlag = ref(false);
const signUpModel = ref({
  form: {
    userName: "",
    userPhone: "",
    wechat: "",
    lps: 1,
    enterpriseAddress: ''
  },
});

let enterpriseType = ref('0')

let departmentShow = ref(false)
function headelDepartmentSaveClick(n) {
  signUpModel.value.form.wechat = n.value[0].name
  departmentShow.value = false
}
function departmentClick() {
  departmentShow.value = true
}
const departmentList = ref([[
  {label: '市市场监管局高新分局', name: '市市场监管局高新分局'},
  {label: '市自然资源和规划局高新区分局', name: '市自然资源和规划局高新区分局'},
  {label: '应急管理局', name: '应急管理局'},
  {label: '生态建设局', name: '生态建设局'},
  {label: '生态环保执法大队', name: '生态环保执法大队'},
  {label: '市土储高新分中心', name: '市土储高新分中心'},
  {label: '综合执法大队', name: '综合执法大队'},
  {label: '组织人事部', name: '组织人事部'},
  {label: '高新区政务服务大厅', name: '高新区政务服务大厅'},
  {label: '园区管理服务局', name: '园区管理服务局'},
  {label: '机关服务中心', name: '机关服务中心'},
  {label: '不动产登记站', name: '不动产登记站'},
  {label: '政务服务中心', name: '政务服务中心'},
  {label: '社会事务局', name: '社会事务局'},
  {label: '行政审批局', name: '行政审批局'},
  {label: '国土分局', name: '国土分局'},
  {label: '贵阳市不动产登记中心高新站', name: '贵阳市不动产登记中心高新站'},
  {label: '高新区税务局', name: '高新区税务局'},
  {label: '科技创新局', name: '科技创新局'},
  {label: '投资促进局', name: '投资促进局'},
  {label: '创业服务中心', name: '创业服务中心'},
  {label: '质监分局', name: '质监分局'},
  {label: '规划建设局', name: '规划建设局'},
  {label: '产业发展局', name: '产业发展局'},
  {label: '纪工委、监察室', name: '纪工委、监察室'},
  {label: '组织与人力资源部', name: '组织与人力资源部'},
  {label: '财政局', name: '财政局'},
  {label: '党政办公室', name: '党政办公室'},
  {label: '高科城发集团', name: '高科城发集团'},
  {label: '贵州科学城产业集团', name: '贵州科学城产业集团'}
]])

let arrayIndex = ref(0)
const array = ref([
    1, 2
])
function bindPickerChange(e) {
  arrayIndex.value = e.detail.value
}

let arrayDateIndex = ref(0)
const arrayDate = ref([
  '2025-05-23', '2025-05-24'
])
if(new Date('2025-05-24 00:00:00') < new Date()) {
  arrayDate.value = [
    '2025-05-24'
  ]
}
function bindPickerDateChange(e) {
  arrayDateIndex.value = e.detail.value
}

let arrayAddressIndex = ref(0)
const arrayAddress = ref([
  '管委会食堂', '科学城智谷14栋1楼'
])
function bindPickerAddressChange(e) {
  arrayAddressIndex.value = e.detail.value
}

let ticketTotal = ref([])
const getActivityDetailTicketTotal = () => {
  getActivityDetailTicketTotalApi(activityId.value).then((res) => {
    const { code, data } = res
    if (code === 200) {
      ticketTotal.value = [data.friday, data.saturday]
    }
  })
}

/**
 * 立即报名按钮点击事件监听
 * @returns {Promise<void>}
 */
const handleSubmitSignUpForm = async () => {

  if (signUpModel.value.form.userName === "") {
    await uni.showToast({
      icon: "none",
      title: '请输入您的姓名',
      duration: 3000
    })
  }else if (signUpModel.value.form.userPhone === "") {

    await uni.showToast({
      icon: "none",
      title: '请输入您的联系方式',
      duration: 3000
    })
  }else if (signUpModel.value.form.wechat === "") {

    await uni.showToast({
      icon: "none",
      title: '请输入您的企业名称',
      duration: 3000
    })
  }else if (signUpModel.value.form.enterpriseAddress === "" && enterpriseType.value !== '1') {
    await uni.showToast({
      icon: "none",
      title: '请输入您的企业地址',
      duration: 3000
    })
  }
  // else if (signUpModel.form.wxAccount == "") {
  //   await uni.showToast({
  //     icon: "none",
  //     title: '请输入您的微信账户',
  //     duration: 3000
  //   })
  // }
  else {
    let ticketMax = 450
    if(ticketMax - ticketTotal.value[arrayDateIndex.value] - array.value[arrayIndex.value] < 0) {
      await uni.showToast({
        icon: "none",
        title: '当天剩余票数不足',
        duration: 3000
      })
    } else {
      await uni.showLoading({
        title: "正在报名...",
      });
      const params = {
        activityId: activityId.value,
        userName: signUpModel.value.form.userName,
        userPhone: signUpModel.value.form.userPhone,
        idCard: signUpModel.value.form.idCard,
        enterpriseName: signUpModel.value.form.wechat,
        enterpriseAddress: signUpModel.value.form.enterpriseAddress,
        lps: array.value[arrayIndex.value],
        cjsj: arrayDate.value[arrayDateIndex.value],
        lpdd: enterpriseType.value === '1' ? arrayAddress.value[arrayAddressIndex.value] : '科学城智谷14栋1楼',
        // ...signUpModel.form,
      }

      console.log("报名参数",params);
      const res = await userSubmitSignUpActivityFormApi(params);
      const { code, data } = res;
      if (code === 200) {
        uni.hideLoading();
        popDialogShowFlag.value = true;
      } else if (code === 400) {
        uni.hideLoading();
      }
    }
  }
};
const handleDialogCloseBtnClick = () => {
  popDialogShowFlag.value = false;
  // customNav("/package_activity/pages/activity/activity-home");
  uni.navigateBack()
};

const activityId = ref("");
onShow(() => {
  /* #ifdef MP-WEIXIN */
  activityId.value = getUrlParamsInWeixin()?.activityId;
  enterpriseType.value = getUrlParamsInWeixin()?.enterpriseType
  /* #endif */

  /* #ifndef MP-WEIXIN */
  activityId.value = getUrlParamsInH5()?.activityId;
  /* #endif */

  getActivityDetailTicketTotal()
});
</script>
<style lang="less" scoped>
.sign-up {
  height: calc(100vh - 120rpx);
  background-color: @color-origin-white;
  padding: 21rpx 30rpx;
  .card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 688rpx;
    height: 228rpx;
    background: @activity-sign-up-card-img;
    background-size: cover;
    font-family: "ali-m";
    color: @color-origin-white;
    .h1 {
      font-size: 39rpx;
    }
    .h3 {
      font-size: 31rpx;
    }
  }

  .title {
    margin-top: 50rpx;
    font-family: "ali-p";
    font-weight: 500;
    font-size: 31rpx;
    color: @color-black-text;
  }
  .sign-up-form {
    margin-top: 58rpx;
    :deep(.u-form-item__body) {
      margin-bottom: 28rpx;
      //border-bottom: 1px solid @color-light-grey-border;
    }
    :deep(.u-form-item__body) {
      justify-content: space-between;
    }
    :deep(.u-form-item__body__right) {
      max-width: 271rpx;
    }
    :deep(.u-form-item__body__left__content__label) {
      font-family: "ali-p";
      font-size: 31rpx;
      color: @color-black-text;
    }
    :deep(.plaClass) {
      text-align: right;
    }
    :deep(.u-input__content) {
      padding-right: 20rpx;
    }
  }
  .submit-btn {
    display: flex;
    align-items: center;
    position: fixed;
    bottom: 0;
    width: 100vw;
    height: 111rpx;
    box-sizing: border-box;
    background-color: @color-origin-white;
    .btn {
      width: 706rpx;
      height: 65rpx;
      line-height: 65rpx;
      border-radius: 33rpx;
      background: @linear-gradient-btn;
      font-family: "ali-p";
      font-size: 33rpx;
      color: @color-origin-white;
      font-weight: 500;
      text-align: center;
    }
  }
}
// :deep(.text-content) {
//   display: flex;
//   flex-direction: column;
//   align-items: center;
//   margin-top: 52rpx;

//   .text {
//     font-family: 'ali-p';
//     font-size: 23rpx;
//     color: @color-grey-text;
//     font-weight: 400;
//     line-height: 39rpx;
//   }

// }
:deep(.mask) {
  .popup-dialog {
    padding: 30rpx 60rpx;
    text-align: center;
    .text {
      line-height: 100rpx;
      font-size: @font-size-23;
      color: @color-grey-text;
    }
    .btn-group {
      padding: 0 0;
    }
  }
  // display: flex;
  // flex-direction: column;
  // align-items: center;
  // margin-top: 52rpx;

  // .text {
  //   font-family: 'ali-p';
  //   font-size: 23rpx;
  //   color: @color-grey-text;
  //   font-weight: 400;
  //   line-height: 39rpx;
  // }
}
.btn-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: @color-blue-text;
  font-family: "ali-p";
  font-size: 31rpx;
  line-height: 39rpx;
  margin-top: 40rpx;
  padding-bottom: 40rpx;
  .btn {
    margin-top: 20rpx;
  }
}

.uni-list-item__container, .container--right {
  padding: 0;
}
.uni-list-item__extra-text {
  font-size: 15rpx;
}
.uni-list--border:after {
  background-color: #ffffff;
}

.uni-input {
  text-align: right;
  position: relative;
  right: 20rpx;
}
</style>
